<template>
  <div class="backlogin">
    <img class="imags" src="@/assets/img/logo.png" alt="" />
    <lottie-player
      class="dongh1"
      src="https://assets2.lottiefiles.com/packages/lf20_fbry1ksx.json"
      background="transparent"
      speed="1"
      style="width: 500px; height: 500px"
      loop
      autoplay
    ></lottie-player>
    <div class="login">
      <div class="top">
        <div class="img">
          <lottie-player
            class="dongh"
            src="https://assets3.lottiefiles.com/packages/lf20_6mhjyde5.json"
            background="transparent"
            speed="1"
            style="width: 200px; height: 200px"
            loop
            autoplay
          ></lottie-player>
        </div>
        <slot name="loginsign"></slot>
        <div class="other_login">
          <p>其他登录方式</p>
          <div>
            <img src="@/assets/img/qq_icon.svg" alt="" />

            <img src="@/assets/img/gitee_icon.svg" alt="" />
            <img src="@/assets/img/wexin_icon.svg" alt="" />
            <img src="@/assets/img/weibo_icon.svg" alt="" />
          </div>
        </div>
      </div>
    </div>

    <lottie-player
      class="zhuanq"
      src="https://assets5.lottiefiles.com/packages/lf20_ayn1zkwb.json"
      background="transparent"
      speed="1"
      style="width: 100px; height: 100px"
      loop
      autoplay
    ></lottie-player>
    <lottie-player
      class="chilun"
      src="https://assets5.lottiefiles.com/packages/lf20_ayn1zkwb.json"
      background="transparent"
      speed="1"
      style="width: 100px; height: 100px"
      loop
      autoplay
    ></lottie-player>
  </div>
</template>
<style scoped lang="scss">
.backlogin {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(@/assets/img/bg-01.jpg);
  background-size: cover;
  position: relative;
  .imags {
    position: absolute;
    left: 0px;
    height: 300px;
    width: 300px;
    top: -60px;
    cursor: pointer;
  }
}

.chilun {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.backlogin .zhuanq {
  position: absolute;
  left: 20px;
  bottom: 20px;
}
.login {
  width: 400px;
  min-height: 580px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;
  border-radius: 5px;
  background-color: #673ab7;
  display: flex;
  flex-direction: column;

  .clear_auto_login {
    display: none;
  }

  .top {
    padding: 40px 20px 20px 20px;
    .img {
      .dongh {
        margin: 0 auto;
        margin-top: -50px;
      }
    }

    .other_login {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      > p {
        font-size: 14px;
        color: #808595;
      }

      &::before {
        position: absolute;
        content: "";
        display: block;
        width: 35%;
        height: 1px;
        background-color: #808595;
        left: 0;
        top: 8px;
      }

      &::after {
        position: absolute;
        content: "";
        display: block;
        width: 35%;
        height: 1px;
        background-color: #808595;
        right: 0;
        top: 8px;
      }

      > div {
        margin-top: 20px;

        img {
          width: 40px;
          margin-right: 10px;
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>
